<template>
  <div class="head">
    <el-input v-model="input2" style="width: 240px" placeholder="请输入部门名称" :prefix-icon="Search" />
    <label for="username">用户名称</label>
    <el-input id="username" v-model="input2" style="width: 240px" placeholder="请输入用户名称" />
    <label for="username">手机号码</label>
    <el-input id="username" v-model="input2" style="width: 240px" placeholder="请输入手机号码" />
    <label for="username">状态</label>
    <el-select v-model="value" placeholder="用户状态" size="default" style="width: 240px">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
    <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
      end-placeholder="结束日期" size="default" />
  </div>

  <div class="container">
    <el-tree style="max-width: 600px" :data="treeData" :props="defaultProps" @node-click="handleNodeClick"
      default-expand-all />
    <div class="containerRight">
      <div class="btnBoxTop">
        <el-button type="primary" :icon="Search">搜索</el-button>
        <el-button :icon="Refresh">重置</el-button>
      </div>
      <div class="btnBoxFoot">
       
        <el-button type="primary" :icon="Plus" plain>新增</el-button>
        <el-button type="success" :icon="Edit" plain>修改</el-button>
        <el-button type="danger"  :icon="Delete" plain>删除</el-button>
        <el-button type="info" :icon="DocumentAdd"  plain>导入</el-button>
        <el-button type="warning" :icon="DocumentRemove" plain>导出</el-button>
        
      </div>
      <div class="Usertable">

      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { deptTreeSelect } from '@/apis/user'
import { Search, Refresh,Edit,Plus,Delete,DocumentAdd,DocumentRemove } from '@element-plus/icons-vue'

// 定义树形数据
const treeData = ref([])
//定义选择器数据
const options = [
  { value: 'Option1', label: '正常' },
  { value: 'Option2', label: '停用' },
]

// 日期选择器的值
const value1 = ref('')

// 其他逻辑
const handleNodeClick = (node) => {
  console.log(node)
}

const defaultProps = {
  children: 'children',
  label: 'label',
}

// 获取数据
const fetchTreeData = async () => {
  try {
    const response = await deptTreeSelect()
    if (response.data.code === 200) {
      treeData.value = response.data.data
    }
  } catch (error) {
    console.error('获取树形数据失败:', error)
  }
}

// 页面加载时获取数据
onMounted(fetchTreeData)
</script>

<style lang="scss" scoped>
.head {
  display: flex;
  gap: 16px;
  align-items: center;
  /* 垂直居中对齐 */

  .el-input,
  .el-select,
  .el-date-picker {
    width: 240px;
  }

  .el-input__inner,
  .el-select__inner,
  .el-date-picker__input {
    height: 40px;
    /* 设置高度为统一的40px */
    line-height: 40px;
    /* 保证文本垂直居中 */
  }

  label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
}

.container {
  display: flex;
  margin-top: 20px;

  .el-tree {
    width: 250px;
  }

  .containerRight {
    width: 1400px;
    height: 100vh;
    background-color: pink;
    .btnBoxFoot{
      margin-top: 10px;
    }
  }
}
</style>
